<template>
	<view>
		<u-navbar title="任务列表" :title-size="36"  :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff"  :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<u-search @search="search" @custom="search" style="    padding: 0 15px;" placeholder="搜索积水点,地点人名" v-model="keywords" shape="round" :clearabled="true" bg-color="#fff" margin="30rpx 0rpx"></u-search>
		    <ul class="tab">
				<li :class="{'active':tabIndex==1}" @click="tabClick(1)">指派给我的</li>
				<li :class="{'active':tabIndex==2}" @click="tabClick(2)">我指派的</li>
				<li :class="{'active':tabIndex==3}" @click="tabClick(3)">待指派的</li>
				<li :class="{'active':tabIndex==4}" @click="tabClick(4)">全部</li>
			</ul>
				 <ul class="list-box" v-if='lists.length>0' style="height:100%;padding-bottom:80rpx">
					<li class="list-item" v-for="(item,index) in lists" @click="viewDetails(item.taskId,item.taskType,item)">
						<div class="i-top">
							<span v-if="item.taskType==1" class='drop_t i-top_title'>积水险情</span>
							<span v-if="item.taskType==2"  class='eng_t i-top_title'>工程险情</span>
							<span v-if="item.taskType==3"  class='people_t i-top_title'>人员转移</span>
							<span v-if="item.taskType==4"  class='material_t i-top_title'>物资调度</span>
							<span v-if="item.taskType==5"  class='power_t i-top_title'>力量调度</span>
							<!-- <u-tag class="radius-style" :text="item.status|filterStatus" type="error" 
							:bg-color="getBgColor(item.status)" color="#FFFFFF" mode="dark"/> -->
							<div class="statusType">
								<div v-if="item.status==1"　class="readyto">待指派</div>
								<div v-if="item.status==2" 　class="indoing">处置中</div>
								<div v-if="item.status==3" 　class="resolve">已完成</div>
							</div>
						</div>
						<!-- 积水险情 --> 
						<div v-if="item.taskType == 1">
							<div class="i-item">
								<span>
									<i>险情地点：</i>
									<em>{{item.address}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>积水深度：</i>
									<em v-if='item.depth==1'>30cm以下</em>
									<em v-if='item.depth==2'>30cm-50cm</em>
									<em v-if='item.depth==3'>50cm以上</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>发生时间：</i>
									<em>{{item.happenTime}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>上报人：</i>
									<em>{{item.createName}}&nbsp;&nbsp;{{item.tel}}</em>
								</span>
							</div>
						</div>
						<!-- 工程险情 -->
						<div v-if="item.taskType == 2">
							<div class="i-item">
								<span>
									<i>险情地点：</i>
									<em>{{item.address}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>工程险情：</i>
									<em v-if="item.depth==1">满溢</em>
									<em v-if="item.depth==2">渗水</em>
									<em v-if="item.depth==3">渗漏</em>
									<em v-if="item.depth==4">崩塌</em>
									<em v-if="item.depth==5">其他</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>发生时间：</i>
									<em>{{item.happenTime}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>上报人：</i>
									<em>{{item.createName}}&nbsp;&nbsp;{{item.tel}}</em>
								</span>
							</div>
						</div>
						<!-- 人员转移 -->
						<div v-if="item.taskType == 3">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{item.address}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务描述：</i>
									<em>{{item.description}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{item.happenTime}}</em>
								</span>
							</div>
						</div>
						<!-- 物资调度 -->
						<div v-if="item.taskType == 4">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{item.address}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>物资仓库：</i>
									<em>{{item.targetObjectName}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{item.happenTime}}</em>
								</span>
							</div>
						</div>
						<!-- 力量调度 -->
						<div v-if="item.taskType == 5">
							<div class="i-item">
								<span>
									<i>任务地点：</i>
									<em>{{item.address}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>防汛队伍：</i>
									<em>{{item.targetObjectName}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>调度数量：</i>
									<em>{{item.targetObjectCount}}</em>
								</span>
							</div>
							<div class="i-item">
								<span>
									<i>任务时间：</i>
									<em>{{item.happenTime}}</em>
								</span>
							</div>
						</div>
						<div class="btn" v-if="item.status != '3'">
							<div class="btn-c" @click.stop="dispose(item.taskId,item.taskType,item.targetObjectName)">处置</div>
							<div class="btn-c" v-if="item.status == '2'" @click.stop="goappoint(item.taskId,item.taskType,item.status)">转派</div>
							<div class="btn-c" v-if="item.status == '1'" @click.stop="goappoint(item.taskId,item.taskType,item.status)">指派</div>
						</div>
					</li>
					<u-loadmore v-if='loadMore' :status="status" />
					<div v-if='!loadMore' style='text-align: center;color: #999;margin-top:20rpx'>没有更多数据了</div>
					<!-- <u-button  plain type="primary" style="margin: 15px 15px 0;" @click="taskList">加载更多</u-button> -->
				 </ul>
				 
		</view>
		<!-- 底部导航 -->
		<u-tabbar :list="tabbarList" height="40px"></u-tabbar>
	</view>
</template>

<script>
	import {myMixin} from '../../../mixins/mixin.js' 
	import {ObjectUtil} from '../../../assets/js/Oak.js' 
	export default {
		name: 'monitorCurve',
		mixins:[myMixin],
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				keywords: '',
				taskStatus: '',
				lists:[],
				tabIndex:1,
				lastId:0,
				loadMore:true,
				status: 'loadmore',
				list: 15,
				page: 0
			};
		},
		mounted() {
			this.taskList(1)
		},
		methods: {
			onPullDownRefresh() {
				this.lists = []
				this.lastId = 0
				this.taskList()
			},
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			if(this.loadMore){
				this.taskList()
			}else{
				return false
			}
		},
			goBack(){
				uni.navigateBack()
			},
			tabClick:function(tabIndex){
				this.tabIndex = tabIndex;
				this.lastId=0;
				this.lists=[];
				this.taskList();
			},
			search(){
				this.lastId=0;
				this.lists=[];
				this.taskList();
			},
			viewDetails(id,type,option){
				let options = JSON.stringify(option)
				uni.navigateTo({url: '/pages/scheduling/taskManage/details?id='+id+'&type='+type+'&options='+options});
			},
			dispose(id,type,floodTeamName){
				if(type == 1 || type == 2){  //1.积水  2.工程
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/waterDispose?id='+id+'&type='+type});
				}else if(type == 3){  //3.人员转移
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/personDispose?id='+id+'&type='+type});
				}else if(type == 4){  //4.物资转移
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/materialDispose?id='+id+'&type='+type});
				}else if(type == 5){  //5.力量调度
					uni.navigateTo({url: '/pages/scheduling/taskManage/dispose/powerDispose?id='+id+'&type='+type+'&stem='+floodTeamName||''});
				}
			},
			taskList(){
				let params={keyword:this.keywords,user:"1",id:this.lastId};
				let api=this.$api.reqApi.assignToMeTaskList;
				if(this.tabIndex==2){
					api=this.$api.reqApi.myAssignTaskList
				}else if(this.tabIndex==3){
					api=this.$api.reqApi.initedTaskList;
				}else if(this.tabIndex==4){
					api=this.$api.reqApi.taskList;
				}
				this.status = 'loading';
				api(params).then(res => {
					setTimeout(()=>{
						uni.stopPullDownRefresh()
					},1000)
					if(res.length>0){
						res.forEach(item=>{
							this.lists.push(item);
						});
						this.status = 'loadmore'
						this.lastId=res[res.length-1].taskId;
						this.loadMore=res.length==10; // 当加载数量等于10的时候，才可能存在下一批数据，这时候显示加载更多按钮
					}else{
						this.lastId=0;
						this.loadMore=false;
						this.status = 'nomore'
					}
				});
			},
			goappoint(id,type,status){
				uni.navigateTo({url: '/pages/scheduling/taskManage/appoint?id='+id+'&type='+type+'&status='+status});
			}
		},
		filters:{
			filterStatus:function(val){
				if(val==1){
					return "待指派";
				}else if(val==2){
					return "处置中";
				}else{
					return "处置完成";
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.u-load-more-wrap{
		margin-top: 80rpx !important;
	}
.tab{
	display: flex;
	justify-content: space-around;
	// background-color: #fff;
	height: 80rpx;
	
	li{
		border-bottom: 2px solid transparent;
		padding: 0 8rpx;
		line-height: 70rpx;
		font-size: 30rpx;
		color: #999999;
		position: relative;
		&.active{
			// border-color: #007AFF;
			font-weight: 700;
			color: #000000;
		}
		&.active::after{
			content: '';
			width: 76rpx;
			height: 2px;
			background-color: #4e7bef;
			position: absolute;
			bottom: 7px;
			    left: calc(50% - 19px);
		}
	}
}
.content{
	// margin: 0 30rpx;
}
.list-box{
	i{
		font-style: inherit;
	}
	.list-item{
		border-radius: 10rpx;
		background-color: rgb(255, 255, 255);
		box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(9, 42, 75, 0.06);
		// margin-top: 20rpx;
		padding: 20rpx;
		// border: 1px solid #ddd;
		position: relative;
		width: 87%;
		    margin: 10px auto 0;
		.i-top{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 50rpx;
			height: 80rpx;
			&>span{
				flex: 1;
				font-size: 30rpx;
				color: #101010;
				font-weight: 700;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}
		.radius-style{
			border-bottom-right-radius: 24rpx;border-top-left-radius: 24rpx;border-top-right-radius: 0;border-bottom-left-radius: 0;
		}
		.i-item{
			color: #959595;
			margin-top: 10rpx;
			
			span:first-child{
				 margin-right: 20rpx;
				 line-height: 40rpx;
			}
			i,em{
				font-size: 28rpx;
				font-style: inherit;
				width: 100px;
			}
			span {
				display: flex;
				i{
					color: #666666;
				}
			}
			em{
				display: inline-block;
				width: 480rpx;
				color: black;
				color: #333;
				font-weight: bold;
				// text-overflow: inherit;
				// overflow: hidden;
				// white-space: nowrap;
			}
		}
		.btn{
			display: flex;
			margin-top: 20rpx;
			.btn-c {
				margin-top: 10rpx;
				width: 303rpx;
				height: 64rpx;
				font-size: 28rpx;
				background-color: rgb(240, 242, 244);
				color: #000;
				border-radius: 8px;
				line-height: 64rpx;
				text-align: center;
				margin-right: 20rpx;
			}


			.u-size-mini{
				margin-left: 10rpx;
			}
		}
	}
}
.statusType {
	div{
		border-radius: 8px;
		width: 126rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 4px;
		font-size: 28rpx;
	}
	.indoing {
		background-color: rgba(81, 144, 238,.1);
		color: rgb(81, 144, 238);
	}
	.readyto{
		background-color: rgba(232, 86, 90,.1);
		color: rgb(232, 86, 90);
	}
	.resolve {
		background-color: rgba(20, 205, 194,.1);
		color: rgb(20, 205, 194);
	}
}

.i-top_title::before {
	content: '';
	width: 40rpx;
	height: 40rpx;
	background-size: 100% 100%;
	position: absolute;
	top: 40rpx;
	left: 10px;
}
.drop_t::before {
	background: url(image/icon_drop.png) no-repeat center;
	background-size: 100% 100%;
}
.eng_t::before {
	background: url(image/icon_eng.png) no-repeat center;
	background-size: 100% 100%;
}
.power_t::before {
	background: url(image/icon_power.png) no-repeat center;
	background-size: 100% 100%;
}
.material_t::before {
	background: url(image/icon_mat.png) no-repeat center;
	background-size: 100% 100%;
}
.people_t::before {
	background: url(image/icon_people.png) no-repeat center;
	background-size: 100% 100%;
}
</style>
